<template>
  <el-form :model="teacher" :rules="rules" ref="teacherForm" label-width="120px" >
    <el-form-item label="教师编号" prop="id">
      <el-input v-model="teacher.id" :disabled="props.type==='edit'"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="teacher.name"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="teacher.sex">
        <el-radio value="男" size="large">男</el-radio>
        <el-radio value="女" size="large">女</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="电话" prop="phone">
      <el-input v-model="teacher.phone"></el-input>
    </el-form-item>
    <el-form-item label="教学班级" v-if="props.type!=='add'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
          :disabled="props.type==='edit'"
      >
        <el-option
            v-for="item in teacher.classes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="学院" prop="collegeName">
      <el-select
          v-model="teacher.collegeName"
          filterable
          placeholder="Select"
          style="width: 240px"
          :disabled="props.type==='edit'"
      >
        <el-option
            v-for="item in collegeOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="课程" v-if="props.type==='edit'">
      <el-select
          filterable
          placeholder="展开"
          style="width: 240px"
          :disabled="props.type==='edit'"
      >
        <el-option
            v-for="item in teacher.courses"
            :key="item.id"
            :label="item.name"
            :value="item.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item v-if="props.type!== 'search'">
      <el-button @click="emits('visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/requests/request.js";
import {idStores} from "@/stores/stores.js";
import {ElMessage} from "element-plus";
const emits = defineEmits('visible')
const props = defineProps({
  type: String
})
const teacherForm = ref(null)
const teacher = ref({
  name: '',
  id: '',
  age: null,
  sex: '男',
  phone: '',
  collegeName: '',
  courses: '',
  classes: ''
})
if(props.type === 'add'){
  teacher.value = {
    name: '',
    id: '',
    age: null,
    sex: '男',
    phone: '',
    collegeName: '',
    courses: '',
    classes: ''
  }
}
const store = idStores();
onMounted(() => {
  request.get('/teacher/get-teacher', {
    params: {
      id: store.id
    }
  }).then(res => {
    teacher.value = res.data.data
    if(props.type === 'add'){
      teacher.value = {
        name: '',
        teacherId: '',
        age: null,
        sex: '男',
        phone: '',
        collegeName: '',
        courses: '',
        classes: ''
      }
    }
  })
  request.get('/college/get-college-tree').then(res => {
    collegeOptions.value = res.data.data
  })
})
const collegeOptions = ref([])
const rules = ref(
    {
      id: [
        {required: true, message: '请输入教师编号', trigger: 'blur'},
      ],
      name: [
        {required: true, message: '请输入姓名', trigger: 'blur'},
      ],
      phone: [
        {required: true, message: '请输入电话', trigger: 'blur'},
      ],
      collegeName: [
          {required: true, message: '请选择学院', trigger: 'blur'},
      ]
    }
)
const submitForm = () => {
  teacherForm.value.validate((valid) => {
    if (valid) {
      if (props.type === 'add') {
        request.post('/register/teacher', {
          username: teacher.value.id,
          name: teacher.value.name,
          sex: teacher.value.sex,
          phone: teacher.value.phone,
          password: teacher.value.id,
          collegeId: teacher.value.collegeName,
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      } else {
        request.post('/teacher/update-teacher', {
          campusId: teacher.value.id,
          name: teacher.value.name,
          sex: teacher.value.sex,
          phone: teacher.value.phone,
        }).then(res => {
          emits('visible', false);
          ElMessage({
            message: res.data.message,
            type: 'success',
          })
        });
      }
    }
  })
}
</script>
